<template>
    <div class="left_bar">
        <div class="item">
            <div class="year">{{curDate.year}}/{{curDate.month}}</div>
            <div class="month">{{curDate.number}}</div>
            <div class="txt1">第</div>
            <div class="txt2">期</div>
        </div>
        <div class="history" @click="showHistory">
            往期<br>作品
        </div>
        <el-dialog
            title="往期作品"
            :visible.sync="dialogVisible"
            width="1200px" class="history_bd">
            <el-carousel height="550px" :initial-index="curActive" arrow="always" indicator-position="none" :autoplay="false">
                <el-carousel-item v-for="(item,index) in history" :key="index">
                    <h2>{{ item.year }}年</h2>
                    <div class="list">
                        <ul>
                            <li v-for="(child,index2) in item.list" :key="index2" :class="{'item':child.number && child.url}" @click="goSubject(item.year,child.month,child.number,child.url)">
                                <template v-if="child.number">
                                    <el-image
                                        style="width:100%; height:100%"
                                        :src="child.url"
                                        fit="cover">
                                    </el-image>
                                    <div class="txt">{{item.year}}/{{child.month}} 第{{child.number}}期</div>
                                </template>
                                <template v-else>
                                    <img src="../assets/img/logo.png">
                                </template>
                            </li>
                        </ul>
                    </div>
                </el-carousel-item>
            </el-carousel>
        </el-dialog>
    </div>
</template>

<script>
    import { near_date,history_works } from '@/assets/js/getData';
    import { mapState,mapMutations } from 'vuex';
    import { setSession } from '@/assets/js/base';
    export default {
        name:'leftBar',
        data(){
            return {
                curDate:{
                    year:'',
                    month:'',
                    number:'1'
                },
                curActive:0,
                dialogVisible:false,
                history:[]
            }
        },
        computed:{
            ...mapState([
                'baseInfo'
            ])
        },
        mounted(){
            // 直接获取浏览器传的参数，配合导出pdf，格式：2020-07-1
            if(this.$route.params.date){
                let num = this.$route.params.date.split('-');
                this.curDate.year = num[0];
                this.curDate.month = num[1];
                this.curDate.number = num[2];
                this.curActive = num[0] - 2020;
                setSession("baseInfo",this.curDate);
                this.SETBASEINFO(this.curDate);
            }else{
                if(this.baseInfo.year){
                    this.curDate.year = this.baseInfo.year;
                    this.curDate.month = this.baseInfo.month;
                    this.curDate.number = this.baseInfo.number;
                    this.curActive = this.baseInfo.year - 2020;
                }else{
                    this.init();
                }
            }
        },
        methods:{
            ...mapMutations([
				'SETBASEINFO'
            ]),
            async init(){
                const res = await near_date();
                this.curDate.year = res.data.year;
                this.curDate.month = res.data.month;
                this.curDate.number = res.data.number;
                this.curActive = res.data.year - 2020;
                setSession("baseInfo",this.curDate);
                this.SETBASEINFO(this.curDate);
            },
            async showHistory(){
                const res = await history_works();
                if(res.code == '0'){
                    this.history = res.data;
                    this.dialogVisible = true;
                }else{
                    this.$message({
                        showClose:true,
                        message: res.message,
                        type: 'error'
                    });
                }
            },
            // 年，月，期数，封面url
            goSubject(y,m,n,url){
                if(n){
                    this.curDate.year = y;
                    this.curDate.month = m;
                    this.curDate.number = n;
                    this.curDate.url = url;
                    setSession("baseInfo",this.curDate);
                    this.SETBASEINFO(this.curDate);
                    // 子传父
                    this.$emit('leftEvent',this.curDate);
                    this.$router.push('/');
                    this.dialogVisible = false;
                }
            }
        }
    }
</script>

<style scoped>
    .left_bar{position: absolute;top:60px;left:76px;}
    .left_bar .item{width: 80px;height: 80px;background:#fff;margin-bottom:10px;position: relative;}
    .left_bar .item .year{text-align:center;font-size:14px;background:#5b8cff;color: #fff;line-height:18px;}
    .left_bar .item .month{text-align:center;font-size:50px;line-height:64px;}
    .left_bar .item .txt1{font-size:12px;position: absolute;top:40px;left:6px;}
    .left_bar .item .txt2{font-size:12px;position: absolute;top:40px;right:6px;}
    .left_bar .history{width: 80px;height: 80px;background: #dce0e5;color:#fff;font-size:16px;display:flex;align-items: center;justify-content:center;cursor: pointer;}
    .left_bar .history:hover{background:#c6cbd1;}

    .history_bd >>> .el-dialog__header{background:#f8f8f8;padding:15px 20px;}
    .history_bd h2{text-align:center;font-size:30px;color:#353942;}
    .history_bd .list{padding:30px 0 0 16px;}
    .history_bd .list li{border-radius:4px;width:160px;height:217px;background: #ffffff;border:1px solid #e9ecf0;float: left;margin:0 30px 30px 0;position: relative;overflow: hidden;text-align:center;line-height:217px;}
    .history_bd .list li:nth-child(6n){margin-right:0;}
    .history_bd .list li.item{cursor: pointer;}
    .history_bd .list li .txt{height:40px;position: absolute;left:0;bottom:0;width:100%;line-height:40px;background:rgba(0, 0, 0, 0.5);color:#fff;font-size:15px;text-align:left;text-indent:12px;}
    .history_bd .list li .none{color:#D1D8DF;}
    .history_bd >>> .el-carousel__arrow--left{top:22px;left:440px;}
    .history_bd >>> .el-carousel__arrow--right{top:22px;right:440px;}
</style>